<template>
  <div>
    <div class="container">
      <h3>这是根组件</h3>
      <hr />
      <div class="row">
        <div class="col-xs-6">
          <p>搜索GitHub用户：</p>
          <form class="form-inline">
            <p class="form-group">
              <input
                type="text"
                class="form-control"
                v-model="keyword"
                @keyup.enter="fn"
              />
            </p>
            <button class="btn btn-primary" @click.prevent="fn">
              发送请求
            </button>
          </form>
        </div>
      </div>

      <ul>
        <li v-for="item in list" :key="item.id">
          <!-- {{ item }} -->
          <img :src="item.avatar_url" alt="" />
          <span>{{ item.login }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      keyword: '',
      list: []
    }
  },
  methods: {
    async fn() {
      // 声明基础地址
      axios.defaults.baseURL = 'https://api.github.com'

      const { data } = await axios(`/search/users?q=${this.keyword}`)
      console.log(data)
      this.list = data.items
    }
  }
}
</script>

<style lang="less" scoped>
button {
  outline: none !important;
  margin-left: 10px;
}

li {
  float: left;
  width: 120px;
  margin: 10px;

  img {
    width: 100%;
  }
}
</style>
